<template>
  <div class="user-home">
    <!-- 顶部横幅 -->
    <div class="banner">
      <div class="banner-bg"></div> <!-- 渐变背景 -->
      <div class="banner-content">
        <img class="avatar" :src="user.avatar" alt="头像" /> <!-- 头像 -->
        <div class="user-info">
          <div class="user-row">
            <span class="user-name">{{ user.name }}</span> <!-- 用户名 -->
          </div>
          <div class="user-title">称号: {{ user.title }}</div> <!-- 称号 -->
        </div>
        <div class="youce_oo">
          <!-- <div class="banner-actions">
            <button class="follow-btn">关注</button> 
            <button class="author-btn" @click="zuozhe_op()">作家页</button> 
          </div> -->
          <div class="user-stats">
            <div class="stat-item">
              <div class="stat-label">关注</div>
              <div class="stat-value">0</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">粉丝</div>
              <div class="stat-value">0</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="main-area">
      <!-- 左侧内容 -->
      <div class="main-left">
        <!-- 收藏的书单 -->
        <div class="card collect-list">
          <div class="card-title">收藏的书单(0)</div>
          <div class="empty-box">
            <div class="empty-icon"> <!-- 空状态图标 -->
              <svg width="48" height="48" viewBox="0 0 48 48"><path d="M24 8a2 2 0 0 1 2 2v2h10a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2V14a2 2 0 0 1 2-2h10v-2a2 2 0 0 1 2-2zm0 4H12v24h24V12H24z" fill="#e0e0e0"/></svg>
            </div>
            <div class="empty-text">该用户暂无收藏的书单</div>
          </div>
        </div>
        <!-- 粉丝荣誉 -->
        <div class="card fans-honor">
          <div class="card-title">粉丝荣誉</div>
          <div class="honor-tags">
            <span class="honor-tag" v-for="(tag, idx) in honorTags" :key="idx" :class="{active: tag.active}">{{ tag.text }}</span>
          </div>
          <div class="empty-box honor-empty">
            <div class="empty-icon">
              <svg width="48" height="48" viewBox="0 0 48 48"><path d="M24 8a2 2 0 0 1 2 2v2h10a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2V14a2 2 0 0 1 2-2h10v-2a2 2 0 0 1 2-2zm0 4H12v24h24V12H24z" fill="#e0e0e0"/></svg>
            </div>
            <div class="empty-text">暂无作品处于当前粉丝等级<br>订阅、投月票、打赏均可提升粉丝等级等荣誉哦</div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="main-right">
        <!-- 认证 -->
        <div class="right-card">
          <div class="right-title">徽章</div>
          <div class="badge-row">
            <img v-for="(badge, idx) in badges" :key="idx" :src="badge.img" class="badge-icon" :title="badge.title" alt="徽章" />
          </div>
        </div>
        <!-- 足迹 -->
        <div class="right-card">
          <div class="right-title">足迹</div>
          <div class="footprint-list">
            <div class="footprint-item">收藏藏书：1本</div>
            <div class="footprint-item">订阅过作品：0本</div>
            <div class="footprint-item">推荐作品：0张</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserHome',
  data() {
    return {
      user: {
        avatar: require('../assets/image/100.jpg'), // 头像
        name: '男',
        gender: '男',
        title: '无'
      },
      honorTags: [
        { text: '0见习', active: false },
        { text: '0学徒', active: false },
        { text: '0弟子', active: false },
        { text: '0执事', active: false },
        { text: '0舵主', active: false },
        { text: '0堂主', active: false },
        { text: '0护法', active: false },
        { text: '0长老', active: false },
        { text: '0掌门', active: false },
        { text: '0宗师', active: false },
        { text: '0盟主', active: false },
        { text: '0白银盟', active: true },
        { text: '0黄金盟', active: false }
      ],
     
      badges: [
        // {img:require('../assets/image/cert1.png'),title:'互动徽章v3'},
        // {img:require('../assets/image/cert2.png'),title:'互动徽章v2'},
        {img:require('../assets/image/cert3.png'),title:'新人徽章'},
        {img:require('../assets/image/cert4.png'),title:'互动徽章v1'},
        {img:require('../assets/image/cert5.png'),title:'白银徽章'},
      ]
    }
  },
  methods:{
    //跳转作者主页
    zuozhe_op(){
      this.$router.push('/author');
    }
  }
}
</script>

<style lang="scss" scoped>
.user-home {
  background: #f7f7fb; // 整体背景
  min-height: 100vh;
  .banner {
    position: relative;
    height: 220px;
    .banner-bg {
      position: absolute;
      left: 0; top: 0; right: 0; bottom: 0;
      background-image: url('../assets/image/337c8462.9ewwm6.jpg');
      background-size: 100% 100%;
      z-index: 1;
    }
    .banner-content {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding-top: 3%;
      .avatar {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        border: 4px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        margin-right: 32px;
        background: #fff;
      }
      .user-info {
        display: flex;
        flex-direction: column;
        margin-right: 32px;
        .user-row {
          display: flex;
          align-items: center;
          .user-name {
            font-size: 22px;
            color: #fff;
            font-weight: bold;
            margin-right: 12px;
          }
          .user-gender {
            font-size: 15px;
            color: #fff;
            opacity: 0.8;
            margin-right: 12px;
          }
        }
        .user-title {
          font-size: 15px;
          color: #fff;
          opacity: 0.8;
          margin-top: 6px;
        }
      }
      .youce_oo{
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
      }
      .banner-actions {
        display: flex;
        align-items: center;
        margin-left: auto;
        .follow-btn {
          background: #e94f4f;
          color: #fff;
          border: none;
          border-radius: 6px;
          padding: 8px 22px;
          font-size: 15px;
          font-weight: bold;
          margin-right: 12px;
          cursor: pointer;
          transition: background 0.2s;
          &:hover { background: #c92c2c; }
        }
        .author-btn {
          background-color: #64646455;
          color: #fff;
          border: none;
          border-radius: 6px;
          padding: 8px 18px;
          font-size: 15px;
          font-weight: bold;
          margin-right: 12px;
          cursor: pointer;
          transition: background 0.2s;
          &:hover { background: #222; }
        }
        .more-btn {
          background: #f3f3f3;
          color: #444;
          border: none;
          border-radius: 6px;
          padding: 8px 16px;
          font-size: 18px;
          font-weight: bold;
          cursor: pointer;
          transition: background 0.2s;
          &:hover { background: #ececec; }
        }
      }
      .user-stats {
        display: flex;
        align-items: center;
        margin-left: 48px;
        margin-top: 20px;
        .stat-item {
          margin-left: 32px;
          .stat-label {
            color: #d1c6f7;
            font-size: 14px;
            margin-bottom: 4px;
          }
          .stat-value {
            color: #fff;
            font-size: 22px;
            font-weight: bold;
            text-align: center;
          }
        }
      }
    }
  }
  .main-area {
    display: flex;
    max-width: 1200px;
    margin: 60px auto 0 auto;
    position: relative;
    z-index: 3;
    .main-left {
      flex: 1;
      .card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
        margin-bottom: 24px;
        padding: 0 0 18px 0;
        .card-title {
          font-size: 16px;
          font-weight: bold;
          color: #222;
          padding: 18px 28px 0 28px;
        }
      }
      .collect-list {
        .empty-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 32px 0 24px 0;
          .empty-icon {
            margin-bottom: 12px;
            text-align: center;
          }
          .empty-text {
            color: #bdbdbd;
            font-size: 16px;
            text-align: center;
          }
        }
      }
      .fans-honor {
        .honor-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          padding: 12px 28px 0 28px;
          .honor-tag {
            background: #f3f3f3;
            color: #888;
            border-radius: 4px;
            padding: 4px 12px;
            font-size: 14px;
            &.active {
              background: #ffeaea;
              color: #e94f4f;
              font-weight: bold;
            }
          }
        }
        .honor-empty {
          padding: 32px 0 24px 0;
          .empty-icon {
            margin-bottom: 12px;
            text-align: center;
          }
          .empty-text {
            color: #bdbdbd;
            font-size: 16px;
            text-align: center;
            line-height: 1.7;
          }
        }
      }
    }
    .main-right {
      width: 340px;
      margin-left: 32px;
      .right-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
        margin-bottom: 24px;
        padding: 18px 22px 10px 22px;
        .right-title {
          font-size: 16px;
          font-weight: bold;
          color: #222;
          padding-bottom: 10px;
          margin-bottom: 15px;
          border-bottom: solid 1px #dbdbdb;
          .right-desc {
            color: #aaa;
            font-size: 14px;
            margin-left: 8px;
            font-weight: normal;
          }
        }
        .cert-icons {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 10px;
          .cert-icon {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f3f3;
            border-radius: 6px;
            img {
              width: 22px;
              height: 22px;
            }
          }
          .cert-more {
            color: #888;
            font-size: 14px;
            margin-left: 8px;
            cursor: pointer;
          }
        }
        .badge-row {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 10px;
          .badge-icon {
            width: 32px;
            height: 32px;
            border-radius: 6px;
          }
        }
        .footprint-list {
          padding: 0 0 0 2px;
          .footprint-item {
            color: #888;
            font-size: 14px;
            margin-bottom:10px;
          }
        }
      }
    }
  }
}
</style>
